<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-11-23 09:12:49
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:33:41
-->
<template>
  <div>
    <el-form
      :model="ordinaryForm"
      ref="ordinaryForm"
      :rules="purposeRules"
      label-position="top"
      v-if="IssueShow"
    >
      <el-form-item label="发票信息">
        <div class="invInfo" v-if="ordinaryForm.title">
          <div>
            <span>发票抬头：{{ ordinaryForm.title }}</span>
            <span></span>
          </div>
          <div>
            <span>纳税人识别号：{{ ordinaryForm.identifier }}</span>
          </div>
        </div>
        <span
          style="
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #1267fa;
            cursor: pointer;
          "
          @click="addIncrement"
          >+ 添加增值资质</span
        >
        <span
          style="
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #c4c5c6;
            margin-left: 10px;
          "
          >增值资质只能添加一条</span
        >
      </el-form-item>
      <el-form-item label="发票内容" prop="content">
        <el-select v-model="ordinaryForm.content" placeholder="请选择发票内容">
          <el-option
            v-for="item in contentOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收件地址">
        <div v-for="(item, index) in addressList" :key="index">
          <div class="addressList">
            <div
              class="addressList-spc"
              :class="active == index ? 'active' : ''"
              @click="chiooseAdd(item, index)"
            >
              <span>{{ item.addressee }}</span>
              <span style="margin-left: 10px">{{ item.phone }}</span>
              <span style="margin-left: 10px">{{ item.address }}</span>
            </div>
            <div class="addressList-ope">
              <span v-if="!item.isDefault" @click="setDef(item)">
                设为默认地址
              </span>
              <span @click="edit(item)">编辑</span>
              <span
                @click="del(item)"
                style="
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #ff0000;
                "
                >删除</span
              >
            </div>
          </div>
        </div>
        <span
          style="
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #1267fa;
            cursor: pointer;
          "
          @click="newAdd"
          >+ 添加收件地址</span
        >
        <span
          style="
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #c4c5c6;
            margin-left: 10px;
          "
          >收件地址最多可添加3条</span
        >
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="ordinaryForm.remark"></el-input>
      </el-form-item>
    </el-form>
    <increment :dialog="dialog" @addIncrement="addIncrement"></increment>
    <new-address
      :dialog="dialog"
      @addList="addList"
      ref="addRess"
    ></new-address>
  </div>
</template>

<script>
import {
  vatInvoiceList,
  invoiceAddressList,
  setDefault,
  deleteInvoiceAddress,
} from "@/api/enterprise/invoiceAst.js";
import increment from "./increment.vue";
import NewAddress from "./newAddress.vue";
export default {
  components: { increment, NewAddress },
  props: {
    ordinaryForm: {
      type: Object,
      required: true,
    },
    IssueShow: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      contentOptions: [
        {
          value: 1,
          label: "咨询费",
        },
        {
          value: 2,
          label: "报名费",
        },
      ],
      active: 0,
      addressList: [],
      dialog: {
        incrementShow: false,
        addressShow: false,
      },
      incrementShow: false,
      addressList: [],
      incrementList: [],
      purposeRules: {
        info: [
          {
            required: true,
            message: "请添加增值资质",
          },
        ],
        content: [
          {
            required: true,
            message: "请选择发票内容",
            trigger: "change",
          },
        ],
        address: [
          {
            required: true,
            message: "请填写收件地址",
          },
        ],
      },
    };
  },
  created() {
    this.getZList();
    this.getaddList();
  },
  methods: {
    // 设为默认
    setDef(item) {
      setDefault({
        id: item.id,
      }).then((res) => {
        this.$message.success(res.msg);
        this.getaddList();
      });
    },
    // 修改
    edit(item) {
      this.dialog.addressShow = true;
      this.$refs.addRess.addressForm = item;
    },
    // 删除
    async del(item) {
      let ids = [];
      ids.push(item.id);
      const confirmResult = await this.$confirm(
        "该操作将删除该地址，你确认删除吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        deleteInvoiceAddress(ids).then((res) => {
          this.$message.success(res.msg);
          this.getaddList();
        });
      }
    },
    // 选择地址
    chiooseAdd(item, i) {
      this.active = i;
      this.ordinaryForm.addressId = item.id;
    },
    //   获取地址
    getaddList() {
      invoiceAddressList().then((res) => {
        this.addressList = res.rows;
        if (res.rows.length > 0) {
          this.ordinaryForm.addressId = res.rows[0].id;
        }
      });
    },
    // 查询发票信息
    getZList() {
      vatInvoiceList().then((res) => {
        if (res.rows.length > 0) {
          this.ordinaryForm.title = res.rows[0].title;
          this.ordinaryForm.identifier = res.rows[0].identifier;
          this.ordinaryForm.vatId = res.rows[0].id;
        }
      });
    },
    addList(val) {
      this.addressList.push(val);
    },
    //   新增资质
    addIncrement() {
      if (this.ordinaryForm.title) {
        return;
      } else {
        this.dialog.incrementShow = true;
      }
    },
    // 新增地址
    newAdd() {
      if (this.addressList.length > 3) {
        return;
      } else {
        this.dialog.addressShow = true;
      }
    },
    onSubmit() {},
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  /deep/ .el-input__inner {
    width: 509px;
  }
}
.invInfo {
  width: 509px;
  height: 70px;
  border-radius: 4px;
  border: 1px solid #1267fa;
  padding-left: 10px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2b2b2b;
  background: #f4f7ff url("../../../../../assets/images/rightUp.jpg") no-repeat
    top right !important;
  background-size: 22px 22px !important;
}
.addressList {
  display: flex;
  width: 100%;
  height: 40px;
  margin-top: 10px;
  .addressList-spc {
    width: 509px;
    height: 100%;
    border: 1px solid #d3dbeb;
    padding-left: 10px;
  }
  .addressList-ope {
    display: none;
    span {
      margin-left: 10px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1267fa;
      cursor: pointer;
    }
  }
}
.addressList:hover .addressList-ope {
  display: block;
}
.active {
  background: url("../../../../../assets/images/rightUp.jpg") no-repeat right
    top;
  background-size: 22px 22px;
}
</style>